<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-coin">家庭总收入</i></div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            ￥{{ incomeTotal }}
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div><i class="el-icon-money">家庭总支出</i></div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            ￥{{ payTotal }}
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-bank-card">家庭总余额</i></div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            ￥{{ propertyTotal }}
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #e6a23c">
          <div><i class="el-icon-s-shop">家庭总负债</i></div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            ￥{{ liabilitiesTotal }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="pie" style="width: 500px; height: 400px"></div>
      </el-col>

      <el-col :span="12">
        <div id="incomeMain" style="width: 500px; height: 400px"></div>
      </el-col>

      <el-col :span="12">
        <div id="payMain" style="width: 500px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getIncomeTotal,
  getPayTotal,
  getLiabilitiesTotal,
  getPropertyTotal,
  getIncomeTotalByEveryMonth,
  getPayTotalByEveryMonth
} from '../../api/admin/common/index'
export default {
  data() {
    return {
      payTotal: 0,
      incomeTotal: 0,
      propertyTotal: 0,
      liabilitiesTotal: 0,
      payTotalByMonth: [],
      incomeTotalByMonth: []
    };
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      getIncomeTotal().then(res => {
        this.incomeTotal = res.data
      })
      getPayTotal().then(res => {
        this.payTotal = res.data
      })
      getLiabilitiesTotal().then(res => {
        this.liabilitiesTotal = res.data
      })
      getPropertyTotal().then(res => {
        this.propertyTotal = res.data
      })
      getIncomeTotalByEveryMonth().then(res => {
        this.incomeTotalByMonth = res.data
      })
      getPayTotalByEveryMonth().then(res => {
        this.payTotalByMonth = res.data
      })
    }
  },
  mounted() {
    //饼图
    setTimeout(() => {
      // 收入折线图
      var incomeMainDom = document.getElementById("incomeMain");
      var incomeMainChart = echarts.init(incomeMainDom);
      var monthIncomeSum = this.incomeTotalByMonth.map(item => item.monthSum);
      var moneyIncomeSum = this.incomeTotalByMonth.map(item => item.total_income);
      var optionIncome = {
        title: {
          text: '一年内每个月的总收入', // 主标题文本
          left: 'center' // 标题水平位置
        },
        xAxis: {
          type: 'category',
          data: monthIncomeSum
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: moneyIncomeSum,
            type: 'line',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          }
        ]
      };
      incomeMainChart.setOption(optionIncome)
      // 支出折线图
      var payMainDom = document.getElementById("payMain");
      var payMainChart = echarts.init(payMainDom);
      var monthPaySum = this.payTotalByMonth.map(item => item.monthSum);
      var moneyPaySum = this.payTotalByMonth.map(item => item.total_income);
      var optionPay = {
        title: {
          text: '一年内每个月的总支出', // 主标题文本
          left: 'center' // 标题水平位置
        },
        xAxis: {
          type: 'category',
          data: monthPaySum
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: moneyPaySum,
            type: 'line',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          }
        ]
      };
      payMainChart.setOption(optionPay)
      // 饼图
      var pietDom = document.getElementById("pie");
      var pieChart = echarts.init(pietDom);
      var pieOption = {
        title: {
          text: '比例', // 主标题文本
          left: 'center' // 标题水平位置
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.payTotal,
                name: '总支出'
              },
              {
                value: this.incomeTotal,
                name: '总收入'
              },
              {
                value: this.propertyTotal,
                name: '总余额'
              },
              {
                value: this.liabilitiesTotal,
                name: '总负债'
              }
            ]
          }
        ]
      };
      pieChart.setOption(pieOption);
    }, 1000)

  },
};
</script>

<style></style>
